<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>收益情况显示</title>
    <link rel="stylesheet" type="text/css" href="../default/css/animate.css"/>
    <link rel="stylesheet" href="../default/css/mui.min.css">
    <link rel="stylesheet" type="text/css" href="../default/css/v3.css"/>
    <style>
        .radar {
            background: -webkit-radial-gradient(center, rgba(32, 255, 77, 0.3) 0%, rgba(32, 255, 77, 0) 75%), -webkit-repeating-radial-gradient(rgba(32, 255, 77, 0) 5.8%, rgba(32, 255, 77, 0) 18%, #20ff4d 18.6%, rgba(32, 255, 77, 0) 18.9%), -webkit-linear-gradient(90deg, rgba(32, 255, 77, 0) 49.5%, #20ff4d 50%, #20ff4d 50%, rgba(32, 255, 77, 0) 50.2%), -webkit-linear-gradient(0deg, rgba(32, 255, 77, 0) 49.5%, #20ff4d 50%, #20ff4d 50%, rgba(32, 255, 77, 0) 50.2%);
            background: radial-gradient(center, rgba(32, 255, 77, 0.3) 0%, rgba(32, 255, 77, 0) 75%), repeating-radial-gradient(rgba(32, 255, 77, 0) 5.8%, rgba(32, 255, 77, 0) 18%, #20ff4d 18.6%, rgba(32, 255, 77, 0) 18.9%), linear-gradient(90deg, rgba(32, 255, 77, 0) 49.5%, #20ff4d 50%, #20ff4d 50%, rgba(32, 255, 77, 0) 50.2%), linear-gradient(0deg, rgba(32, 255, 77, 0) 49.5%, #20ff4d 50%, #20ff4d 50%, rgba(32, 255, 77, 0) 50.2%);
            width: 70vw;
            height: 70vw;
            max-height: 70vh;
            max-width: 70vh;
            position: relative;
            left: 50%;
            top: 120px;
            transform: translate(-50%, -50%);
            border-radius: 50%;
            border: 0.2rem solid #20ff4d;
            /*overflow: hidden;*/
        }

        .radar:after {
            content: ' ';
            display: block;
            background-image: linear-gradient(60deg, rgba(0, 255, 51, 0) 0%, #00ff33 100%);
            width: 50%;
            height: 50%;
            position: absolute;
            top: 0;
            left: 0;
            animation: radar-beam 3s infinite;
            animation-timing-function: linear;
            transform-origin: bottom right;
            border-radius: 100% 0 0 0;
        }

        @keyframes radar-beam {
            0% {
                transform: rotate(0deg);
            }
            100% {
                transform: rotate(360deg);
            }
        }

        @keyframes scales {
            10% {
                transform: scale(0.1);
                opacity: 0.1;
            }

            25% {
                transform: scale(0.3);
                opacity: 0.4;
            }

            50% {
                transform: scale(0.5);
                opacity: 0.7;
            }

            75% {
                transform: scale(0.7);
                opacity: 1;
            }

            100% {
                transform: scale(1);
                opacity: 0;
            }
        }

        @media screen and (max-width: 800px) {
            .summary h2 {
                font-size: 13px !important;
            }
        }

        .radar img {
            width: 25px;
            position: absolute;
            animation: scales 3s infinite linear;
        }
        .bottom {
            width: 100%;
            justify-content: space-around;
            margin-top: 15px;
            text-align: center;
        }

        .bottom a {
            width: 40%;
            display: inline-block;
            background: rgba(100, 100, 100);
            border-radius: 8px;
            padding: 10px;
            font-size: 16px;
        }

        .bottom span {
            margin-top: 8px;
            display: block;
            font-size: 20px;
        }
        .flex.column{
            font-size: 12px;
        }
        .ibox-content{
            padding: 0;
        }
    </style>
</head>

<body style="height: 100%; margin: 0;background-color:#F5F5F5;">
<header class="mui-bar mui-bar-nav">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" style="color: #666"></a>
    <h1 class="mui-title">收益情况显示</h1>
</header>

<div class="page-header">当前位置：<span class="text-primary">收益情况显示</span></div>
<div class="page-content">
    <div class="radar">
    </div>
    <nav class="bottom">
        <a href="javascript:;" style="color: #fff;font-size: 12px;background: rgba(0,0,0,0.5);padding: 10px">
            服务器连接成功
        </a>
    </nav>
    <nav class="bottom">
        <a href="javascript:;" style="color: #fff">
            今日收益(元)
            <span class="get">0.00</span>
        </a>
    </nav>
</div>
<div class="page-content">
    <div class="row">
        <div class="col-md-6 col-sm-6" style="width:100%">
            <div class="summary_box">
                <div class="summary flex">
                    <div class="flex1 flex column" style="border-right: 1px solid #efefef">
                        昨日收益
                        <h2 class="today-count">¥ <span class="today-price" id="two">0.00</span></h2>

                    </div>
                    <div class="flex1 flex column" style="border-right: 1px solid #efefef">
                        七日收益
                        <h2 class="today-count" id="week">¥0.00</h2>
                    </div>
                    <div class="flex1 flex column" style="border-right: 1px solid #efefef">
                        总收益
                        <h2 class="today-count" id="all">¥0.00</h2>
                    </div>
                    <div class="flex1 flex column">
                        今日收益
                        <h2 class="text-danger">¥ <span class="today-price" id="one">0.00</span></h2>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="page-content">
    <div class="ibox float-e-margins" style="border: 1px solid #e7eaec">
        <div class="ibox-title">
            <h5>套餐列表</h5>
        </div>
        <div class="ibox-content chart" style="height:400px">
            <div id="container" style="height: 100%;width:100%">
            </div>
        </div>
    </div>
</div>
</body>

<script src="../default/js/jquery-2.14.js" type="text/javascript" charset="utf-8"></script>
<script src="../default/js/mui.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../default/js/cookie.js"></script>
<script src="../default/js/code.js" type="text/javascript" charset="utf-8"></script>
<script src="../default/js/index.js" type="text/javascript" charset="utf-8"></script>
<script src="../default/js/public.js"></script>
<script type="text/javascript" src="../default/js/echarts.min.js"></script>
<script>


    mui('body').on('tap', '.float-e-margins', function (e) {
        //打开详情页面
        mui.openWindow({
            url: 'meal-detailed.html'
        });
    });




    $(function () {
        img_ai();
        shouyi();
    })

    function img_ai() {
        var w = $('.radar').outerWidth(),
            h = $('.radar').outerHeight(),
            html = '';
        for (var i = 0; i < 15; i++) {
            var t_n = Math.random(),
                t = h * t_n < 30 ? h * t_n + 30 : h * t_n,
                t = h * t_n > h - 50 ? h * t_n - 30 : t,
                l_n = Math.random(),
                l = w * l_n < 30 ? w * l_n + 30 : w * l_n,
                l = w * l_n > w - 50 ? w * l_n - 30 : l;
            html += '<img src="http://ggb.hezong.org.cn/addons/ewei_shopv2/static/images/qihoo.png" style="top:' + t + 'px;left:' + l + 'px;">';
        }
        $('.radar').empty().append(html);
    }


    function shouyi() {
        $.ajax({
            url:website+'/DetailedFinancialReturnsController/lookUpYesterday',
            type:'post',
            data:{'userId':userId},
            success:function (data) {
                $("#one").html(data.data.todayAmount);
                $(".get").html(data.data.todayAmount);
                $("#week").html('￥'+data.data.weeklyEarnings);
                $("#all").html('￥'+data.data.totalIncome);
                $("#two").html(data.data.yesterdayAmount);
            }
        })
    }

    var dom = document.getElementById("container");
    var myChart = echarts.init(dom);
    option = null;
    option = {
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data:['最高气温','最低气温']
        },
        xAxis:  {
            type: 'category',
            boundaryGap: false,
            data: ['周一','周二','周三','周四','周五','周六','周日']
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                margin:2,
                formatter: ['6000','5000','4000','3000','2000','1000','0'],
            }
        },
        grid:{
          left:35
        },
        series: [
            {
                name:'最高收益',
                type:'line',
                data:[3000, 3500, 4000, 4500, 5000, 5500, 6000],
            },
            {
                name:'最低收益',
                type:'line',
                data:[100, 200, 300,400, 500, 600, 700]
            }
        ]
    };
    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }

</script>
</html>
